<template>
  <div class="main">
    <h4>{{ type }}</h4>
    <el-button class="el-icon-refresh" plain @click="refresh" circle></el-button>
    <el-button class="el-icon-delete" plain @click="delOpen(null)" circle type="danger"></el-button>
    <el-divider></el-divider>
    <div class="table">
      <el-table
        v-loading="loading"
        :data="myFileList.filter(data => !search || data.myFileName.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%;margin-bottom: 10%"
        :default-sort="{prop: 'date', order: 'descending'}"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>

        <el-table-column
          prop="myFileName"
          label="文件名"
          sortable
          width="550">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-if="scope.row.myFileName!=null" class="pointer" @click="preview(scope.row)">
              <i class="el-icon-document" style="font-size: 20px;"></i>&nbsp;
              <span v-html="scope.row.myFileName"></span>
            </span>
            <span style="margin-left: 10px" v-if="scope.row.fileFolderName!=null" class="pointer"
                  @click="openFolder(scope.row.fileFolderId)">
              <i class="el-icon-folder-opened" style="font-size: 20px;"></i>
              &nbsp; <span v-html="scope.row.fileFolderName"></span>
            </span>
          </template>
        </el-table-column>

        <el-table-column
          prop="size"
          label="大小"
          sortable
          width="230"
          :formatter="formSize">
        </el-table-column>

        <el-table-column
          prop="type"
          label="类型"
          sortable
          width="100">
        </el-table-column>

        <el-table-column
          prop="updateTime"
          label="修改日期"
          sortable
          width="250"
          :formatter="formDate">
        </el-table-column>

        <el-table-column
          fixed="right"
          align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="input"/>
          </template>
          <template slot-scope="scope">

            <el-button icon="el-icon-share" circle v-if="scope.row.myFileName!=null"
                       @click="shareOpen(scope.row)"></el-button>
            <el-button icon="el-icon-download" circle type="primary" v-if="scope.row.myFileName!=null"
                       @click="download(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle
                       @click="delOpen(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block" style="">
      <el-pagination align="center"
                     @current-change="handleCurrentChange"
                     background
                     layout="prev, pager, next"
                     :total="100">
      </el-pagination>
    </div>
    <br><br><br><br>
    <el-drawer
      title="文件浏览"
      :visible.sync="drawer"
      size="45%">
      <el-card style="font-size: 15px" shadow="hover">
        <p v-if="previewFile.type=='text'" style="white-space:pre-wrap;">{{ previewFile.data }}</p>
        <img :src="previewFile.data" width="500px" v-if="previewFile.type=='img'"/>
      </el-card>
    </el-drawer>

    <el-drawer
      title="扫二维码，下载文件"
      :visible.sync="drawer_qrcode"
      size="20%"
      style="text-align: center;"
    >
      <el-card style="font-size: 15px" shadow="hover">
        <p>{{ shareMsg }}</p>
        <div id='qrCode' ref='qrCodeDiv' style="padding: 10% 25% 10% 25%;"></div>
      </el-card>
    </el-drawer>
  </div>


</template>

<script>
import Global from "../js/global";
import fileDownload from "js-file-download";
import QRCode from "qrcodejs2";

export default {
  name: "FilesType",
  data() {
    return {
      shareMsg: '',
      drawer_qrcode: false,
      previewFile: {
        type: '',
        data: ''
      },
      drawer: false,
      myFileList: [{
        myFileId: '',
        myFileName: '',
        fileStoreId: '',
        myFilePath: '',
        downloadCount: '',
        updateTime: '',
        parentFolderId: '0',
        size: '',
        type: ''
      }],
      parentFolderId: "0",
      type: '',
      multipleSelection: [],
      search: '',
      loading: true
    }
  },
  methods: {
    shareOpen(row) {
      let that = this;
      this.$confirm('分享生成临时文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          that.shareFile(row);
        }
      ).catch(function (error) {
        console.log(error)
        that.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    shareFile(row) {
      let that = this;
      this.axios({
        url: Global.SERVER_ADDRESS + '/file/shareFile',
        params: {
          fileId: row.myFileId,
          token: that.token,
        },
        method: 'GET',
      }).then(function (rsp) {
        let data = rsp.data;
        if (data.code === '200') {
          that.drawer_qrcode = true;
          let shareUrl = Global.CLIENT_ADDRESS + "/getshare/" + data.msg;
          that.shareMsg = "文件分享码 :  " + data.msg + "  有限期1天";
          //生成分享二维码 定时器解决等待dom加载完
          setTimeout(function creatQrCode() {
            console.log(document.getElementById("qrCode"))
            document.getElementById("qrCode").innerHTML = "";

            new QRCode(that.$refs.qrCodeDiv, {
              text: shareUrl,
              width: 200,
              height: 200,
              colorDark: "#333333",
              colorLight: "#ffffff",
            })
          }, 1000);

        } else {
          that.notification(false, data.msg);
        }
        that.refresh();
      }).catch(function (error) {
        that.$message.error(error);
      })
    },
    creatQrCode(url) {
      document.getElementById("qrCode").innerHTML = "";
      new QRCode(this.$refs.qrCodeDiv, {
        text: url,
        width: 200,
        height: 200,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
      })
    },
    getList(that) {
      that.loading = true;
      const token = that.$cookies.get("TOKEN");
      if (token === null) {
        that.$router.push({path: '/login'});
      }
      const type = that.$route.params.type;
      that.type = type;
      that.axios({
        url: Global.SERVER_ADDRESS + '/file/queryFilesByType/' + that.type + '/P/1',
        params: {
          token: token,
        },
        method: 'GET',
      }).then(function (rs) {
        let data = rs.data;
        if (data.code === '200') {
          let files = JSON.parse(data.msg);
          that.myFileList = files;
          that.loading = false;
        } else {
          that.$message.error(data.msg);
        }
      }).catch(function (error) {
        that.$message.error(error);
      })
    },
    refresh() {
      this.getList(this);
    },
    handleCurrentChange(val) {
      const token = this.$cookies.get("TOKEN");
      if (token === null) {
        this.$router.push({path: '/login'});
      }
      const type = this.$route.params.type;
      this.type = type;
      const that = this;
      this.axios({
        url: Global.SERVER_ADDRESS + '/file/queryFilesByType/' + that.type + '/P/' + val,
        params: {
          token: token,
        },
        method: 'GET',
      }).then(function (rs) {
        let data = rs.data;
        if (data.code === '200') {
          let files = JSON.parse(data.msg);
          that.myFileList = files;
        } else {
          that.$message.error(data.msg);
        }
      }).catch(function (error) {
        that.$message.error(error);
      })
    },
    preview(row) {
      const that = this;
      this.download(row, true, (rs) => {
        if (rs !== false) {
          that.filePreview(rs, row.type);
          this.drawer = true;
        }
      });
    },
    filePreview(file, type) {
      let self = this;
      // 看支持不支持FileReader
      if (!file || !window.FileReader) {
        return;
      }

      //if (/^image/.test(file.type)) {
      // 创建一个reader
      let reader = new FileReader();
      if (type === "图片") {
        // 将图片将转成 base64 格式
        reader.readAsDataURL(file);
        self.previewFile.type = 'img';
      } else if (type === "文档") {
        reader.readAsText(file, 'utf-8');
        self.previewFile.type = 'text';
      } else if (type === "代码") {
        reader.readAsText(file);
        self.previewFile.type = 'text';
      } else {

      }
      // 读取成功后的回调
      reader.onloadend = function () {
        self.previewFile.data = this.result;
      }
    },
    download(row, preview, callback) {
      let fileIdList = new Array();
      fileIdList.push(row.myFileId);
      const token = this.$cookies.get("TOKEN");
      if (token === null) {
        this.$router.push({path: '/login'});
      }
      this.$message('正在获取文件，请不要重复点击，稍等...');
      const that = this;
      this.axios({
        url: Global.SERVER_ADDRESS + '/file/downByFileIds',
        params: {
          token: token,
          fileIdList: JSON.stringify(fileIdList),
        },
        responseType: 'blob',
        method: 'GET',
      }).then(function (resp) {
        let size = resp.data.size
        if (size > 0) {
          //文件浏览
          if (preview === true) {
            // 文件类型非 文档,代码,图片不支持在线浏览
            if (row.type === "文档" || row.type === "代码" || row.type === "图片") {
              let fileName = row.myFileName;
              if (fileName.lastIndexOf(".") !== -1) {
                //文件没有后缀
                var suffixName = fileName.substring(fileName.lastIndexOf("."));
                // 且 office文件也不支持浏览
                if (suffixName === '.doc' || suffixName === '.docx'
                  || suffixName === '.xls' || suffixName === '.xlsx'
                  || suffixName === '.csv' || suffixName === '.PPTX'
                  || suffixName === '.pdf' || suffixName === '.PDF') {
                  that.$message.error("文件在线浏览暂不支持 " + suffixName + " 后缀文件 ");
                  return;
                }
                callback(resp.data);
              }
            } else {
              that.$message.error("文件在线浏览暂不支持 " + row.type + " 格式");
            }
            return;
          } else {
            fileDownload(resp.data, row.myFileName);
          }
          that.notification(true, row.myFileName + " 下载完成");
        } else {
          //文件浏览
          if (preview === true) {
            that.notification(false, row.myFileName + " 打开失败");
            callback(false);
            return;
          }
          that.notification(false, row.myFileName + " 下载失败");
        }
      }).catch(function (error) {
        console.log(error)
        that.$message.error(error);
      })
    },
    delOpen(row) {
      const that = this;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row === null) {
          this.delSelect(that);
        } else {
          this.handleClick(row);
        }
      }).catch(function (error) {
        console.log(error)
        that.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    delSelect: function (thiss) {
      let fileIdList = new Array();
      for (const ms of thiss.multipleSelection) {
        fileIdList.push(ms.myFileId);
      }
      thiss.delFile(fileIdList);
    },
    handleClick: function (row) {
      let fileIdList = new Array();
      fileIdList.push(row.myFileId);
      this.delFile(fileIdList);
    },
    delFile: function (fileIdList) {
      const token = this.$cookies.get("TOKEN");
      if (token === null) {
        this.$router.push({path: '/login'});
      }
      const that = this;
      this.axios({
        url: Global.SERVER_ADDRESS + '/file/delByFileIds',
        params: {
          token: token,
          IdList: JSON.stringify(fileIdList),
        },
        method: 'DELETE',
      }).then(function (rsp) {
        let data = rsp.data;
        if (data.code === '200') {
          that.notification(true, data.msg);
        } else {
          that.notification(false, data.msg);
        }
        that.getList(that);
      }).catch(function (error) {
        that.$message.error(error);
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    formSize(row) {
      return Math.ceil(row.size / 1024).toFixed(0) + " KB";
    },
    formDate(row) {
      let time = new Date(row.updateTime);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let h = time.getHours();
      let m = time.getMinutes();
      let s = time.getSeconds();
      return year + "-" + month + "-" + date + " " + h + ":" + m + ":" + s;
    },

  },
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      vm.getList(vm)
    });
  }
}
</script>

<style scoped>
.main {
  text-align: left;
  padding: 0 2%;
}

.table {
  padding-left: 2%;
}

@media only screen and (max-width: 900px) {
  .main {
    padding: 0 0;
  }

  /deep/ .el-table {
    font-size: 10px;
  }

  .table {
    padding-left: 0;
  }

}

body {
  margin: 0;
}

.pointer:hover {
  cursor: pointer;
  color: #409EFF;
}
</style>
